<script setup>
import {useI18n} from "vue-i18n";
import {ABOUT_SECTION_INFO} from '@public/config.js';
import imageLoader from "@utils/imageLoader.js";

const { locale, t } = useI18n();

let $about = null;
let $about_mask = null;
let $about_mask_text = null;

const lang = computed(() => locale.value);

const handleAboutSectionScroll = () => {
    const rect = $about.getBoundingClientRect();
    const scrolled = Math.abs(rect.top) / (rect.height - (import.meta.env.SSR ? 0 : window.innerHeight));
    if (rect.top <= 0) {
        if (scrolled <= 0.25) {
            requestAnimationFrame(() => {
                let fontSize = scrolled * rect.width * 10 > 64 ? scrolled * rect.width * 10 : 64;
                $about_mask_text.style.opacity = 1;
                $about_mask_text.style.fontSize = `${fontSize}px`;
                $about_mask.style.opacity = 1;
            })
        } else {
            $about_mask_text.style.opacity = 0;
            $about_mask.style.opacity = 0;
        }
    } else {
        $about_mask_text.style.fontSize = '64px';
        $about_mask_text.style.opacity = 1;
        $about_mask.style.opacity = 1;
    }
}

const init = () => {
    $about = document.querySelector('#about');
    $about_mask = document.querySelector('#about .about-mask');
    $about_mask_text = document.querySelector('#about .about-mask h1');
}

onMounted(() => {
    if (!import.meta.env.SSR) {
        init();
        window.addEventListener('scroll', handleAboutSectionScroll);
    }

});
onBeforeUnmount(() => {
    if (!import.meta.env.SSR) {
        window.removeEventListener('scroll', handleAboutSectionScroll);
    }
});
</script>

<template>
    <div id="about" class="about-section section-container">
        <div class="about-mask"><h1>{{ t('aboutTitle') }}</h1></div>
        <template v-for="item in ABOUT_SECTION_INFO.colleges" :key="item.school">
            <div class="school" :style="{ 'background-image': `url(${imageLoader(item.background, 'school')})` }">
                <span>{{ t(item.school) }}</span>
            </div>
            <div class="about-content" :class="{ en: lang === 'en' }">
                <div class="about-content-item animation-fade-in-out" v-for="idx in item.length" :key="idx">
                    {{ t(`${item.school}Introduction${idx}`) }}
                </div>
            </div>
        </template>
    </div>
</template>

<style scoped lang="scss">
#about {
    position: relative;
    z-index: 0;

    .about-mask {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
        mix-blend-mode: multiply;
        color: white;
        z-index: 1;
        overflow: hidden;
        font-size: 4em;
        white-space: nowrap;
        user-select: none;
    }

    .school {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        background-attachment: fixed;

        span {
            margin: auto;
            font-size: 3em;
            letter-spacing: 10px;
            color: white;
            font-weight: bold;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        &.school-neusoft {
            background-image: url("@assets/images/school/neusoft.jpg");
        }

        &.school-gzist {
            background-image: url("@assets/images/school/gzist.jpg");
        }
    }

    .about-content {
        height: 50vh;
        width: 90%;
        max-width: 768px;
        margin: 0 auto;
        text-align: justify;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;

        &.en {
            height: unset;
            margin: 20px auto;

            .about-content-item {
                margin-bottom: 20px;
            }
        }

        &-item {
            color: var(--md-sys-color-on-surface-variant);
        }
    }
}
</style>
